<template>
	<div class="m-message"  v-scroll-bottom="session &&session.messages">
		<!--{{session.messages}}-->
		<ul v-if="sessionUser">
			<li  v-for="item in session.messages">
				<p class="time"><span>{{item.date | time}}</span></p>
				<div class="main" :class="{ self: item.self }">
					<img class="avatar" width="30" height="30" :src="avatar(item)" />
					<template>
						<div class="text" v-if="item.type==1" v-html="item.text"></div>
						<div class="text" v-if="item.type==2"><img style="max-width: 150px;" :src="item.text" alt="" /></div>
					</template>					
				</div>
			</li>
		</ul>
	</div>
</template>
<script>
	import Vue from 'vue'
	export default {
		props: ['session', 'user', 'userList', 'parent_data'],
		computed: {
			sessionUser() {
				return this.userList[this.parent_data.sessionIndex];
			}
		},
		mounted() {
		},
		filters: {
			// 筛选出用户头像
			// 将日期过滤为 hour:minutes
			time(date) {
				if(typeof date === 'string') {
					date = new Date(date);
				}
				let minutes = date.getMinutes() > 9 ? date.getMinutes() : '0'+date.getMinutes();
				return date.getHours() + ':' + minutes;
			}
		},
		methods: {
			avatar(item) {
				// 如果是自己发的消息显示登录用户的头像
				let user = item.self ? this.user : this.sessionUser;
				return user && user.img;
			}
		},
		directives: {
			// 发送消息后滚动到底部
			'scroll-bottom' (el) {
	          	Vue.nextTick(() => {
					el.scrollTop = el.scrollHeight - el.clientHeight;
				})
			}
		}
	};
</script>
<style lang="less">
	.m-message {
		padding: 10px 15px;
		overflow-y: scroll;
		li {
			margin-bottom: 15px;
		}
		.time {
			margin: 7px 0;
			text-align: center;
			>span {
				display: inline-block;
				padding: 0 18px;
				font-size: 12px;
				color: #fff;
				border-radius: 2px;
				background-color: #dcdcdc;
			}
		}
		.avatar {
			float: left;
			margin: 0 10px 0 0;
			border-radius: 3px;
            height: 40px;
            width: 40px;
            display: inline-block;
		}
		.text {
			display: inline-block;
			position: relative;
			padding: 0 10px;
			max-width: ~'calc(100% - 40px)';
			min-height: 30px;
			line-height: 2.5;
			font-size: 12px;
			text-align: left;
			word-break: break-all;
			background-color: #fafafa;
			border-radius: 4px;
			&:before {
				content: " ";
				position: absolute;
				top: 9px;
				right: 100%;
				border: 6px solid transparent;
				border-right-color: #fafafa;
			}
		}
		.self {
			text-align: right;
			.avatar {
				float: right;
				margin: 0 0 0 10px;
			}
			.text {
				/*background-color: #b2e281;*/
				&:before {
					right: inherit;
					left: 100%;
					border-right-color: transparent;
					border-left-color: #b2e281;
				}
			}
		}
	}
</style>